<template>
	<!-- height:calc(100vh - 60px);  -->
	<view v-if="lists" class="video-luma" ref="uv-back-top" style="transition: width 2s;border-right:1px solid #E9ECEF">
		<uv-form labelPosition="left" :model="luma" :rules="rules" ref="form">
			<!-- <uv-form-item v-if="false" labelWidth="80" label="模型" prop="luma.name" borderBottom>
				<view class="luma_content"
					style="width:100% ; display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
					<view style="margin-right: 20px;" v-for="(item, index) in aiList[aicurrent].model" :key="index">
						
						<uv-tags v-if="item.tag.includes('luma')" :text="`${item.name}`" :plain="index != radiosval"
							type="warning" :name="index" @click="clicklist(item,index)">
						</uv-tags>
					</view>
				</view>
			</uv-form-item> -->
			<uv-form-item labelWidth="80" label="生成速度" prop="luma.name" borderBottom>
				<uni-data-select v-model="luma.useMode" :localdata="useMode"></uni-data-select>
			</uv-form-item>
			<uv-form-item labelWidth="80" label="模型" prop="luma.name" borderBottom>
				<uni-data-select v-model="luma.modelName" :localdata="lists.model"></uni-data-select>
			</uv-form-item>
			<!-- <uv-form-item v-if="luma.modelName=='ray-v2'" labelWidth="80" label="时长" prop="luma.name" borderBottom>
				<uni-data-select v-model="luma.duration" :localdata="durations"></uni-data-select>
			</uv-form-item> -->
			<uv-form-item v-if="luma.modelName=='ray-v2'" labelWidth="80" label="清晰度" prop="luma.name" borderBottom>
				<uni-data-select v-model="luma.resolution" :localdata="resolutions"></uni-data-select>
			</uv-form-item>
			<view class="">
				视频比例
			</view>
			<uv-form-item labelWidth="110" label="" borderBottom>
				<view class="imgrate">
					<view v-for="(item,index) in ratioSize" :key="item.text"
						:class="luma['aspectRatio'] == item.value?'item_ss cursor-pointer item_ss_acting':'item_ss cursor-pointer'"
						@click="luma['aspectRatio'] = item.value">
						<view style="height: 70%;display: flex;justify-content: center;align-items: center;">
							<!-- {{clacRate(item)}} -->
							<view class="item_xx" :style="[{
								width: $uv.addUnit(clacRate(item)[0]),
									height: $uv.addUnit(clacRate(item)[1])
								}]">
							</view>
						</view>
						<view class="item_text">
							{{item.text}}
						</view>
					</view>
				</view>
			</uv-form-item>
			<uv-form-item labelWidth="80" label="开始帧图片" prop="luma.enhancePrompt" borderBottom>
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
					<view v-for="(itm,idx) in imageUrl" :key="idx"
						style="position: relative;margin-right: 10px;margin-bottom: 5px;">
						<view class="item_dsh" @click="imageUrl.splice(idx, 1)">
							<uv-icon color="#FFF" bold name="close"></uv-icon>
						</view>
						<uv-image @click="preview(itm.url)" :src="itm.url" width="60px" height="60px"
							radius="6px"></uv-image>
					</view>
					<view v-if="imageUrl.length<10" class="cursor-pointer" @click="prefixclick(4)">
						<view style="background-color: #F4F5F7;border-radius: 4px;border: 1px solid #FFAAFF;padding: 15px;">
							<uv-icon style="opacity: 0.4;" name="camera-fill" size="28" ></uv-icon>
						</view>
					</view>
					<document :maxCount="10" accept="image" uploadText="可以多图,最多6张" ref="document4" v-model="imageUrl"
						@resdata="e=>parentMethod(e,'imageUrl')">
					</document>
				</view>
			</uv-form-item>
			<uv-form-item v-if="luma.modelName=='ray-v1'" labelWidth="80" label="结束帧图片" prop="luma.enhancePrompt"
				borderBottom>
				<view style="display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;">
					<view v-for="(itm,idx) in imageEndUrl" :key="idx"
						style="position: relative;margin-right: 10px;margin-bottom: 5px;">
						<view class="item_dsh" @click="imageEndUrl.splice(idx, 1)">
							<uv-icon color="#FFF" bold name="close"></uv-icon>
						</view>
						<uv-image @click="preview(itm.url)" :src="itm.url" width="60px" height="60px"
							radius="6px"></uv-image>
					</view>
					<view v-if="imageEndUrl.length<10" class="cursor-pointer" @click="prefixclick(3)">
						<view style="background-color: #F4F5F7;border-radius: 4px;border: 1px solid #FFAAFF;padding: 15px;">
							<uv-icon style="opacity: 0.5;" name="camera-fill" size="30" ></uv-icon>
						</view>
					</view>
					<document :maxCount="10" accept="image" uploadText="可以多图,最多6张" ref="document3" v-model="imageEndUrl"
						@resdata="e=>parentMethod(e,'imageEndUrl')">
					</document>
				</view>
			</uv-form-item>
			<view class="demo-input-suffix" style="margin-top: 10px;">
				<target ref="target" title="图片创意描述" v-model="luma.userPrompt" :disabled.sync="disabled"></target>
				<el-input @focus="$emit('focus')" style="margin-top: 5px;"
					placeholder="描写视频详情,如:谁,长什么样,什么时候,在哪里,做什么,画面细节什么样" type="textarea"
					:autosize="{ minRows: 3, maxRows: 4}" v-model="luma.userPrompt">
				</el-input>
			</view>
			<el-link style="font-size: 12px;opacity: 0;height: 0px !important;" type="primary">{{fill}}</el-link>
			<view style="display: flex;justify-content: space-between;">
				<uv-button :disabled="disabled" style="width: 49%;" type="primary" text="提 交"
					@click="submit"></uv-button>
				<uv-button style="width: 49%;" type="error" text="清 空" @click="reset"></uv-button>
			</view>
		</uv-form>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入
	import tabbars from '@/components/tabbar/tabbar';
	import {
		task,
		index,
		taskId,
		getScroll,
		scroll,
	} from '@/common/api.js';
	import uploads from '@/components/upload/upload.vue';
	import config from '@/common/config'
	import target from '@/components/target/target.vue';
	import document from '@/components/document/document.vue';
	export default {
		components: {
			// 注册组件
			document,
			target,
		},
		props: {
			lists: {
				type: [Object, Array],
			},
			minWidth: {
				type: [Number, String],
				default: 1
			},
			aside: {
				type: Boolean,
				default: false
			},
			deepColor: {
				type: String,
				default: '#4D4D4D'
			},
			shallowColor: {
				type: String,
				default: '#808080'
			},
			lightColor: {
				type: String,
				default: '#ccc'
			},
			type: {
				type: String,
				default: 'luma'
			},
			taskInfo: Object,
		},
		data() {
			return {
				fill: config.fill,
				tabbarsValue: 'video',
				scrollTop: 0,
				isFirstLoad: true, // 标志变量，用于判断是否首次加载
				id: '',
				createdAt: '',
				radiosval: 0,
				textarea: "",

				disabled: false,
				ai: "video",
				messages: [],
				quality: [{
					value: 'standard',
					text: "标准"
				}, {
					value: 'hd',
					text: "增强细节"
				}],
				imageUrl: [],
				imageEndUrl: [],
				luma: {
					modelName: 'ray-v2',
					aspectRatio: "9:16",
					useMode: "fast",
					// duration: '5s',
					resolution: '720p',
					imageUrl: "",
					imageEndUrl: "",
					userPrompt: "",
				},
				useMode: [{
					text: 'fast',
					value: 'fast',
				}, {
					text: 'relax',
					value: 'relax',
				}],
				durations: [{
					value: '5s',
					text: "5s"
				}, {
					value: '10s',
					text: '10s'
				}],
				resolutions: [{
					value: '720p',
					text: "720p"
				}, {
					value: '1080p',
					text: '1080p'
				}],
				range: [{
					value: 'flux1-schnell',
					text: "flux1-schnell"
				}, {
					value: 'flux1-dev',
					text: 'flux1-dev'
				}, {
					value: 'flux1-pro',
					text: "flux1-pro"
				}, {
					value: 'dall-e-3',
					text: "dall-e-3"
				}, ],
				dataLoaded: false,
				ratioSize: [{
					text: '9:16',
					value: '9:16',
				}, {
					text: '3:4',
					value: '3:4',
				}, {
					text: '1:1',
					value: '1:1',
				}, {
					text: '4:3',
					value: '4:3',
				}, {
					text: '16:9',
					value: '16:9',
				}, {
					text: '21:9',
					value: '21:9',
				}],
				rules: {
					'userInfo.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		watch: {
			// 监听data数据的变化
			taskInfo: {
				handler(newVal) {
					this.reset();
					this.luma = newVal;
					if (JSON.stringify(newVal) != "{}") {
						this.analysis();
					}
				},
				immediate: true
			}
		},
		mounted() {
			this.tabbarsValue = this.pages();
			this.reset();
			if (JSON.stringify(this.taskInfo) != "{}") {
				this.luma = this.taskInfo;
				this.analysis();
			}
		},
		methods: {
			preview(e) { // 预览图片
				uni.previewImage({
					// current: i,
					urls: [e]
				});
			},
			prefixclick(i) {
				this.$nextTick(() => {
					this.$refs['document' + i].visible();
				});
			},
			clacRate(e) {
				let w = e.text.split(':')[0];
				let h = e.text.split(':')[1];
				if (w * 11 < 20 || h * 11 < 20) {
					w = w * 25;
					h = h * 25;
				} else if (w * 6 < 20 || h * 6 < 20) {
					w = w * 8;
					h = h * 8;
				} else if (w * 4 < 20 || h * 4 < 20) {
					w = w * 7;
					h = h * 7;
				} else if (w * 1.5 < 20 || w * 1.5 < 20) {
					w = w * 2.5;
					h = h * 2.5;
				} else {
					w = w * 2;
					h = h * 2;
				}
				return [w, h];
			},
			submit() {
				var that = this;
				if (this.luma && this.luma.userPrompt) {
					this.disabled = true;
					if (this.luma.modelName == 'ray-v2') this.luma.imageEndUrl = ''
					this.$emit('focus');
					this.$emit('luma', this.luma);
					setTimeout(function() {
						that.disabled = false;
					}, 3000)
				} else {
					this.$refs.toast.show({
						type: 'error',
						message: "创意描述为空！"
					})
				}
			},
			analysis() {
				var array = ['imageEndUrl', 'imageUrl'];
				for (var i = 0; i < array.length; i++) {
					if (this.luma[array[i]]) this[array[i]] = [{
						url: this.luma[array[i]]
					}];
				}
			},
			parentMethod(v, q) {
				this.luma[q] = v[0].path;
			},
			reset() {
				if (this.$refs.target) this.$refs.target.clear();
				this.imageUrl = [];
				this.imageEndUrl = [];
				this.luma = {
					modelName: 'ray-v2',
					aspectRatio: "9:16",
					useMode: 'fast',
					// duration: '5s',
					resolution: '720p',
					imageUrl: "",
					imageEndUrl: "",
					userPrompt: ''
				};
			},
			elinput() {
				if (this.textarea) {
					this.luma['messages'] = [{
						"role": "system",
						"content": this.textarea
					}]
				} else {
					this.luma['messages'] = [];
				}
			},
			formatValue(val, name) {
				this.luma[name] = val / 100;
				return val / 100;
			},
			pages() {
				var pages = getCurrentPages() // 获取栈实例
				let currentRoute = pages[pages.length - 1].route; // 获取当前页面路由
				let currentPage = pages[pages.length - 1]['$page']['fullPath'] //当前页面路径(带参数)
				return currentPage.split('/')[2];
			},
			cTime(time1, data, index) {
				if (index == 0) {
					return true;
				}
				// console.log(" ” " + Number(data.length - 1));
				if (index == Number(data.length - 1)) {
					return false;
				}
				var time2 = data[index + 1] && data[index + 1].createdAt;
				if (!time1 || !time2) {
					return false;
				}
				// console.log(time1 + " 《=》 " + time2);
				// 将时间转换为Date对象
				var date1 = new Date(time1).getTime();
				var date2 = new Date(time2).getTime();
				// 计算时间差（毫秒）
				var difference = Math.abs(date2 - date1);
				// 将时间差转换为分钟
				var minutes = Math.ceil(difference / (1000 * 60)); // 向上取整
				if (minutes > 20) {
					return true;
				} else {
					return false;
				}
			},
			times(time) {
				return " -- " + uni.$uv.timeFrom(new Date(time).getTime()) + " -- ";
			},
			routes(url) {
				this.routed('/pages' + url);
			},
			routed(url) {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						console.log(params, next)
						uni.showLoading({
							title: '等待中...'
						})
						// 模拟处理等待
						setTimeout(() => {
							uni.hideLoading();
							next(true);
						}, 1000)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/uni_modules/uv-ui-tools/index.scss";

	.video-luma {
		height: 100%;
		overflow: auto;

		.imgrate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			width: 100%;

			.item_ss {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				border: 1px solid #cccccc;
				border-radius: 5px;
				width: 60px;
				height: 70px;
				color: #666666;
				margin-bottom: 10px;

				.item_xx {
					background: linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right top no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to bottom, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) left bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat,
						linear-gradient(to left, rgba(120, 109, 245, .5), rgba(120, 109, 245, 0.5)) right bottom no-repeat;
					background-size: 2px 6px, 6px 2px, 2px 6px, 6px 2px;
					// background-color: #d0e2f5;
					margin-top: 0px;
					background-color: #cccccc;
					border: 1px solid #fff;
				}

				.item_text {
					height: 30%;
					padding: 2px 5px;
					bottom: 0px;
				}
			}

			.item_ss_acting {
				border: 1px solid #C6000B;

				.item_xx {
					background-color: #C6000B;
					border: 1px solid #fdff7b;
				}

				.item_text {
					color: #C6000B;
				}
			}
		}

		.item_dsh {
			position: absolute;
			z-index: 10;
			top: 0px;
			right: 0px;
			background-color: #000;
			padding: 5px 6px;
			color: #fff;
			border-top-right-radius: 10px;
			border-bottom-left-radius: 10px;
			cursor: pointer;
		}
	}

	/* 测试 */
	.view_circle0 {
		display: flex;
		justify-content: space-between;

		margin: 50upx;
		width: 200upx;
		height: 200upx;
		border-radius: 50%;
		/* inset 表示内阴影 */
		/* box-shadow: 0 3px 150upx #62d0d6 inset; */
		box-shadow: -10px 0px 50upx #7ce2c0,
			/*左边阴影*/
			0px -10px 50upx #65dee2,
			/*上边阴影*/
			10px 0px 50upx #f7dc77,
			/*右边阴影*/
			0px 10px 50upx #c84848;
		animation: turn 1s linear infinite;
	}

	/* 
		      turn : 定义的动画名称
		      1s : 动画时间
		      linear : 动画以何种运行轨迹完成一个周期
		      infinite :规定动画应该无限次播放
		     */
	@keyframes turn {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}
</style>